<template>
    <div>
    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" v-for="item in unreadList" :key="item.id">
        <router-link :to="'/chat/unreadInfo/'+item.id">
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <h4 class="mui-ellipsis">{{ item.name }}</h4>
                        <p class="mui-h6 mui-ellipsis">{{ item.message }}</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <span class="mui-h5">{{ item.time }}</span>
                    </div>
                </div>
            </li>
        </router-link>
    </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            unreadList : []
        }
    },
    created(){
        this.getUnread();
    },
    methods : {
        getUnread(){
            const list = [
                { id:'1', name:'李娜', time:'20200108 08:01', message:'Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，' },
                { id:'2', name:'柯洁', time:'20200105 16:15', message:'信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款信息化推进办公室张彦合同付款' },
                { id:'3', name:'中国移动', time:'20200101 00:01', message:'2020年到了，您是中国移动的老用户，先祝你新年快乐，新年我们会送您1月欠费不停机业务。。' },
                { id:'4', name:'高正宁', time:'20191231 12:50', message:'新春到来喜事多，合家团圆幸福多；心情愉快朋友多，身体健康快乐多；一切顺利福气多，新年吉祥生意多；祝您好事多！多！多！' },
                { id:'5', name:'白起', time:'20191231 11:25', message:'新年的祝福数不胜数，新年的愿望好多好多，新年的问候依旧美好，在这个温馨的时刻，送上我最真挚的祝福，愿你新年健康加平安，幸福又快乐！' },
                { id:'6', name:'孙膑', time:'20191230 22:31', message:'一张小小的贺卡，一声亲切的问候，代表着关怀和思念，包含着祝福与鼓励，祝新春快乐，合家幸福！' },
                { id:'7', name:'藤子京', time:'201912130 22:01', message:'愿明亮喜庆的春节，象征与温暖你一年中的每个日日夜夜，祝你欢欢喜喜度春节，高高兴兴过新年！' },
            ];
            this.unreadList = list;
        }
    }
}
</script>
<style scoped>
.mui-table h4,.mui-table h5,.mui-table .mui-h5,.mui-table .mui-h6,.mui-table p{
    margin-top: 0;
}
.mui-table h4{
    line-height: 21px;
    font-weight: 500;
}

.mui-table .oa-icon{
    position: absolute;
    right:0;
    bottom: 0;
}
.mui-table .oa-icon-star-filled{
    color:#f14e41;
}
.mui-h5, h5 {
    color: cornflowerblue;
}
</style>